<template>
	<scroll-view scroll-y @scrolltolower="getData" lower-threshold="60">
		<view class="e-p-l-30 e-p-r-30">
			<view v-for="item in msgList" :key="item.id" @tap="handleToDetail(item)">
				<view class="date-box e-flex-xy-center">
					<text class="e-font-26">{{$timeFormat(item.createTime,'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
				<view class="content-box bg-white">
					<view class="" v-if="type == 2">
						<view class="e-flex e-m-b-30" v-if="item.params">
							<image class="img-32" :src="$fullLink(item.params.storeLogo)" mode=""></image>
							<image class="img-32" :src="$staticPath('white-store.png')" mode=""></image>
							<view class="e-m-l-22 e-flex-1 e-line-1">
								{{item.params.storeName}}
							</view>
						</view>
						<view class="msg-line e-m-b-20">
							
						</view>
						<view class="c-333 e-font-32 e-m-b-30">
							{{$t('msg.订单标记发货通知')}}
						</view>
						<view class="e-flex e-m-b-20" v-if="item.params.orderMoney">
							<text class="e-font-26 e-m-r-30" style="color: #A7AAB3;">{{$t('msg.订单金额')}}</text>
							<text class="c-333 e-font-26">{{$unitEn}}{{item.params.orderMoney}}</text>
						</view>
						<view class="e-flex e-m-b-20" v-if="item.params">
							<text class="e-font-26 e-m-r-30" style="color: #A7AAB3;">{{$t('msg.商品详情')}}</text>
							<text class="c-333 e-font-26">{{item.params.commodityName}}</text>
						</view>
						<view class="e-flex e-m-b-30" v-if="item.params">
							<text class="e-font-26 e-m-r-30" style="color: #A7AAB3;">{{$t('msg.订单编号')}}</text>
							<text class="c-333 e-font-26">{{item.params.orderCode}}</text>
						</view>
					</view>
					<view class="" v-else>
						<view class=" e-p-b-30">
							<text class="e-font-32 f-31">{{item.title}}</text>
						</view>
						<view class=" e-p-b-30">
							<text class="e-font-26 f-a7 e-p-b-30">{{item.content}}</text>
						</view>
					</view>
					<view class="footer e-flex e-flex-between">
						<text class="e-font-26 f-91">{{$t('msg.查看详情')}}</text>
						<view class="e-flex">
							<view class="red-box" v-if="type != 2 && !item.state"></view>
							<image class="img-32" src="/pages/public/static/msg/arrow_right.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		getMessageList,
		readMessage
	} from '@/common/request/api'
	export default {
		data() {
			return {
				msgList: [],
				showLoad: false,
				pageNum: 1,
				isGet: true,
				type: ''
			};
		},
		onLoad(opt) {
			this.type = opt.type
			this.getData(opt.type)
		},
		methods: {
			getData(type) {
				if (this.isGet && !this.showLoad) {
					let data = {
						pageNum: this.pageNum,
						pageSize: 10
					}
					this.showLoad = true
					getMessageList(type, data).then(res => {
						this.showLoad = false
						if (res.code == 200) {
							let loadRes = this.$pageLoad(this.msgList, res.data.rows, this.pageNum, 10)
				
							this.pageNum = loadRes.pageNo
							if (this.msgList.length == res.data.total) {
								this.isGet = false
							}
						}
					})
				}
			},
			handleToDetail(item) {
				
				if (this.type == 2) {
					this.$goTo('/pages/systemPay/order/details/index',  {id:item.params.orderCode})
				} else {
					readMessage(this.type, {messageId: item.id})
					this.msgList.some(list => {
						if (list.id === item.id) {
							list.state = 1
							return true
						}
					})
					this.$goTo('/pages/public/msg/sys-msg-detail',  {id:item.id})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-box {
		height: 106rpx;
		color: #A7AAB3;
	}
	.msg-line {
		border-bottom: 1px solid #EDEDED;
	}
	.content-box {
		border-radius: 10rpx;
		padding: 30rpx 30rpx 0;
		.f-31 {
			color: #313133;
		}
		.f-a7 {
			color: #A7AAB3;
		}
		.f-91 {
			color: #919298;
		}
		.footer {
			box-shadow: 0px -1px 0px 0px #EDEDED;
			height: 96rpx;
			.red-box {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: $base-color-red;
				margin-right: 10rpx;
			}
		}
	}
</style>
